<template>
  <div id="map-chart">
    <div id="lranContainer"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import iranData from "./iran.json";
export default {
  name: "MapChart",
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.createChart();
    });
  },
  methods: {
    createChart() {
      let myChart = echarts.init(document.getElementById("lranContainer"));
      echarts.registerMap("Iraq", iranData);
      let list = [
        {
          name: "Al-Anbar",
          value: 129,
        },
        {
          name: "Al-Basrah",
          value: 61,
        },
        {
          name: "Al-Muthannia",
          value: 4,
        },
        {
          name: "Al-Qadisiyah",
          value: 389,
        },
        {
          name: "An-Najaf",
          value: 598,
        },
        {
          name: "Arbil",
          value: 240,
        },
        {
          name: "As-Sulaymaniyah",
          value: 1000,
        },
        {
          name: "At-Ta'mim",
          value: 941,
        },
        {
          name: "Babil",
          value: 871,
        },
        {
          name: "Baghdad",
          value: 777,
        },
        {
          name: "Dhi-Qar",
          value: 0,
        },
        {
          name: "Dihok",
          value: 409,
        },
        {
          name: "Diyala",
          value: 168,
        },
        {
          name: "Karbala",
          value: 298,
        },
        {
          name: "Maysan",
          value: 810,
        },
        {
          name: "Ninawa",
          value: 812,
        },
        {
          name: "Sala ad-Din",
          value: 721,
        },
        {
          name: "Wasit",
          value: 631,
        },
      ];
      let dataList = [],
        nameList = [];
      list.forEach((item) => {
        dataList.push({
          name: item.name,
          type: "map",
          geoIndex: 0,
          data: [item],
          label: {
            show: true,
            position: "inside",
            fontSize: 12,
            color: "#fff",
          },
        });
        nameList.push(item.name);
      });
      let option = {
        title: {
          text: "伊拉克各地区租户数量",
          subtext: "",
          left: "left",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          triggerOn: "mousemove",
          formatter: (param) => {
            return param.name + "：" + param.value;
          },
        },
        legend: {
          // 垂直居中,默认水平居中
          orient: "horizontal",
          bottom: 60,
          // 小图标的宽度和高度
          itemWidth: 14,
          itemHeight: 14,
          // 修改图例组件的文字为 12px
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "14",
            padding: 10,
            borderType: "solid",
          },
          itemStyle: {},
          data: nameList,
        },
        geo: {
          map: "Iraq",
          roam: true,
          scaleLimit: {
            min: 1.2,
            max: 1.2,
          },
          zoom: 1.2,
          top: "12%",
          label: {
            show: true,
            position: "inside",
            fontSize: 12,
            color: "#fff",
            emphasis: {
              show: true,
              color: "#fff",
              fontSize: "13",
            },
          },
          itemStyle: {
            normal: {
              areaColor: "rgba(34, 70, 168, 0.7)",
              borderColor: "#0692a4",
            },
            emphasis: {
              areaColor: "rgba(119, 139, 224, 0.548)",
            },
          },
          selectedMode: "single", //选择模式，单选，只能选中一个地市
          select: {
            //这个就是鼠标点击后，地图想要展示的配置
            disabled: false, //可以被选中
            itemStyle: {
              //相关配置项很多，可以参考echarts官网
              areaColor: "#77e8e4", //选中
            },
          },
        },
        series: dataList,
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
  // mounted() {
  //   const { createData } = this;

  //   createData();

  //   setInterval(createData, 30000);
  // },
};
</script>

<style lang="less">
#map-chart {
  width: 100%;
  height: 100%;
  #lranContainer {
    width: 100%;
    height: 100%;
  }
}
</style>
